<template>
  <div class="ver-layout">
    <title-view></title-view>
    <el-card class="top-menu">
      <div slot="header">
        <el-tabs type="card" stretch @tab-click="tabClick">
          <el-tab-pane label="购气单位">
            <span slot="label"><i class="el-icon-date"></i>购气单位</span>
          </el-tab-pane>
          <el-tab-pane label="牵引车牌号"></el-tab-pane>
          <el-tab-pane label="长管拖车牌号"></el-tab-pane>
          <el-tab-pane label="开票人"></el-tab-pane>
        </el-tabs>
      </div>
      <el-card class="table-layout">
        <div slot="header" class="clearfix hor-layout-side-center">
          <div class="database-title">*{{ tableTitle }}数据：</div>
          <div class="hor-layout-center">
            <div>
              <span class="hint-view">单位模板.xls</span>
              <el-button type="text" size="small" class="moban-view">(下载查看)</el-button>
            </div>
            <el-button type="success" size="mini" @click="importData()">{{ importObj[tableTitle] }}</el-button>
            <el-button type="primary" size="mini" @click="addData()">{{ addObj[tableTitle] }}</el-button>
          </div>
        </div>
        <el-table :data="tableObj[tableTitle].data" stripe border fit>
          <el-table-column type="index" label="#"/>
          <el-table-column :label="getColumnName()" prop="label" align="center"/>
          <el-table-column label="操作" align="center" width="100px">
            <template scope="scope">
              <el-button type="danger" size="mini" @click="deleteTableData(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    
    <el-dialog :title="addObj[tableTitle]" center :visible.sync="showDialog" top="30vh">
      <el-card>
        <el-form :model="formData" label-width="25%">
          <el-form-item :label="columnObj[tableTitle]">
            <el-input v-model="formData.name" clearable style="width: 100%" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="showDialog = false">取 消</el-button>
        <el-button size="small" type="primary" style="margin-left: 20px" @click="handleAddProcess()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TitleView from "@/components/title-view";
import {getLocalData, setLocalData} from "../../utils/local"

export default {
  name: "database",
  components: {TitleView},
  data() {
    let company = getLocalData('company')
    let busNum = getLocalData('busNum')
    let user = getLocalData('user')
    return {
      tableObj: {
        '购气单位': {data: company, key: 'company'},
        '牵引车牌号': {data: busNum, key: 'busNum'},
        '长管拖车牌号': {data: busNum, key: 'busNum'},
        '开票人': {data: user, key: 'user'},
      },
      columnObj: {'购气单位': '单位名称', '牵引车牌号': '车牌号', '长管拖车牌号': '拖车牌号', '开票人': '姓名',},
      addObj: {'购气单位': '新增单位', '牵引车牌号': '新增车牌号', '长管拖车牌号': '新增车牌号', '开票人': '新增用户',},
      importObj: {'购气单位': '导入单位', '牵引车牌号': '导入车牌号', '长管拖车牌号': '导入车牌号', '开票人': '导入用户',},
      tableTitle: '购气单位',
      showDialog: false,
      formData: {}
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    getColumnName() {
      return this.columnObj[this.tableTitle]
    },
    tabClick(item) {
      this.tableTitle = item.label
      console.log(item.label)
    },
    addData() {
      this.showDialog = true
    },
    importData() {

    },
    handleAddProcess() {
      if (this.formData.name) {
        let dateValue = new Date().getTime()
        // dateValue = `${dateValue.getFullYear()}-${dateValue.getMonth() + 1}-${dateValue.getDay()}`
        let newData = this.tableObj[this.tableTitle].data
        newData.unshift({value: dateValue, label: this.formData.name})
        setLocalData(this.tableObj[this.tableTitle].key, newData)
        this.tableObj[this.tableTitle].data = newData
        this.formData.name = ''
      }
      this.showDialog = false
    },
    deleteTableData(data) {
      let tableData = this.tableObj[this.tableTitle].data
      let newData = tableData.filter(item => item.value !== data.value)
      setLocalData(this.tableObj[this.tableTitle].key, newData)
      this.tableObj[this.tableTitle].data = newData
    }
  }
}
</script>

<style scoped>
.top-menu {
  width: 85%;
  margin: 0px auto;
  margin-top: 3rem;
}

::v-deep.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background: lightgray;
}

/*::v-deep.el-tabs--card > .el-tabs__header .el-tabs__item {*/
/*  padding: 0 2rem;*/
/*  height: 4rem;*/
/*  line-height: 4rem;*/
/*  font-size: 1.4rem;*/
/*}*/

/*::v-deep.el-button--mini {*/
/*  font-size: 1.2rem;*/
/*}*/

/*::v-deep.el-button--mini, .el-button--mini.is-round {*/
/*  padding: 0.7rem 1.5rem;*/
/*}*/

/*::v-deep.el-button--small {*/
/*  !*padding: 0.9rem 1.5rem;*!*/
/*  font-size: 1.2rem;*/
/*  border-radius: 0.3rem;*/
/*}*/

/*::v-deep.el-table {*/
/*  font-size: 1.4rem;*/
/*}*/

/*::v-deep.el-table .el-table__cell {*/
/*  padding: 1.2rem 0;*/
/*}*/

/*::v-deep.el-table .cell {*/
/*  line-height: 2.3rem;*/
/*  padding-left: 1rem;*/
/*  padding-right: 1rem;*/
/*}*/

.table-layout {
  margin: 0px auto;
}

.database-title {
  color: #7ad55d;
  font-size: 1.1rem;
}

.moban-view {
  margin-left: 0.5rem;
  margin-right: 2rem;
}

.hint-view {
  margin-left: 0.3rem;
  font-size: 1rem;
  color: #ff814d;
}
</style>
